<!--这是添加产品分类组件-->
<template>
  <div style="padding-bottom: 30px;">
    <p class="filter"></p>
    <div class="addBox">
      <h3 class="fixTitle">
        <span v-if="newsId > 0">编辑</span>
         <span v-else>新增</span>
        <p>
          <em style="cursor: pointer;" @click="close">
            <svg-icon icon-class="cha" class="font-size16"/>
          </em>
        </p>
      </h3>
      <el-form :model="newsData" :rules="rules" ref="newsData" label-width="200px" label-position="right"
               style="margin-top: 40px;">
        <el-form-item label="产品分类：" prop="cId">
          <el-row>
            <el-select clearable @change="catOnechange" style="width:300px;" v-model="newsData.catOne" placeholder="一级分类">
              <el-option v-for="item in category" v-if="item.parentId==0" :key="item.ncId" :label="item.name" :value="item.ncId">
              </el-option>
            </el-select>
            <el-select clearable style="width:300px;"  v-model="newsData.cId" placeholder="二级分类">
              <el-option v-for="item in category" v-if="item.parentId==catparId" :key="item.ncId" :label="item.name" :value="item.ncId">
              </el-option>
            </el-select>
          </el-row>
        </el-form-item>
        <el-form-item label="资讯名称：" prop="name">
          <el-input :maxlength=80 v-model="newsData.name" placeholder="请输入名称，最多80个字" class="width300"></el-input>
        </el-form-item>
        <el-form-item label="资讯图片：" required>
          <image-component class="fl" :image="newsData.avatar" :width="'100px'" :height="'100px'"></image-component>
          <el-button  class="fl" type="primary" icon="upload" style="bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">
            更换图片
          </el-button>
          <image-cropper :width="200" :height="200" url="/common/news/imageUpload" @close='closeImageCropper'
                        @crop-upload-success="cropSuccess" langType="zh"
                        :key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
        </el-form-item>
        <el-form-item label="阅读量">
          <el-input type="number" min="0" v-model="newsData.browse" placeholder="请输入" class="width300"
                    @keyup.native="newsData.browse=isNum(newsData.browse)"></el-input>
        </el-form-item>
        <el-form-item label="顺序：">
          <el-input type="number" min="0" v-model="newsData.sort" placeholder="请输入" class="width300"
                    @keyup.native="newsData.sort=isNum(newsData.sort)"></el-input>
        </el-form-item>
        <el-form-item label="专栏详情：" prop="content">
          <tinymce :height="350" v-model="newsData.content" style="float: left;"></tinymce>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-edit" @click="dataSave">保存</el-button>
          <el-button type="info" @click="close">关闭</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import imageComponent from '@/components/imageComponent'
  import ImageCropper from '@/components/ImageCropper'
  import { validateNumber } from '@/utils/validate'
  import { getNewsDetails, newsSave } from '@/api/news'
  export default {
    props: ['newsId'],
    components: {
      imageComponent,
      ImageCropper,
      Tinymce: require('@/components/Tinymce').default
    },
    data() {
      return {
        category: [],
        newsData: {
          avatar:''
        },
        catparId: null,
        rules: {
          name: [{ required: true, message: '请输入资讯名称', trigger: 'blur' },
            { min: 1, max: 80, message: '长度在 1 到 80 个字符', trigger: 'blur' }],
          cId: [{ required: true, message: '请选择二级类别', trigger: 'change' }],
          content: [{ required: true, message: '请填写资讯详情', trigger: 'change' }]
        },
        imagecropperShow: false,
        imagecropperKey: 0 // 图片裁剪key
      }
    },
    mounted() {
      var query = {'newsId':this.newsId}
      getNewsDetails(query).then(res => {
        this.category = res.data.data.category;
        this.newsData = res.data.data.details;
        if (this.newsData.catOne) {
            this.catparId = this.newsData.catOne
        }
         console.log(res)
      }).catch(err => {
        console.log(err)
      })
    },
    methods: {
      catOnechange(val) {
        this.catparId = val || null
        this.newsData.catTwo = null
      },
      isNum(field) {
        return validateNumber(field)
      },
      dataSave() {
        if (!this.newsData.name) {
          this.$message({
            type: 'error',
            message: '必须填写名称！'
          })
          return
        }
        if (!this.newsData.cId) {
          this.$message({ message: '请选择二级分类' })
          return
        }
        if (this.newsData.avatar == '' || this.newsData.avatar == null) {
          this.$message({ message: '图片必传' })
          return
        }
        if (!this.newsData.content) {
          this.$message({ message: '请填写详情' })
          return
        }
        
        var data = {
            newsId:this.newsId,
            cId: this.newsData.cId,
            name: this.newsData.name,
            avatar: this.newsData.avatar,
            content: this.newsData.content,
            browse: this.newsData.browse,
            sort: this.newsData.sort
        }
        newsSave(data).then(res => {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.close()
          this.$emit('saveNews')
        }).catch(err => {
          console.log(err)
        })
      },
      close() {
        this.$emit('hideAdd', false)
      },
      closeImageCropper() {
        this.imagecropperShow = false
      },
      cropSuccess(resData) {
        this.imagecropperShow = false
        this.imagecropperKey = this.imagecropperKey + 1
        this.newsData.avatar = resData.data.imageUrl
      }
    }
  }
</script>
<style scoped>
  p, h3 {
    margin: 0;
    padding: 0
  }

  .fixTitle {
    height: 36px;
    width: 900px;
    padding: 0 20px;
    z-index: 98;
  }

  .addBox {
    width: 900px;
    min-height: 300px;
    background: #fff;
    overflow: auto;
    position: fixed;
    left: 20%;
    top: 2%;
    z-index: 110;
  }

</style>
